<template>
    <div class="search">
        <div class="search-top">
            <el-input
            v-model="searchWord"
            style="width: 340px"
            placeholder="回车搜索"
            :prefix-icon="Search"
            class="search-input"
            />
            <gIcon :icon="iconList.search" @click="gotoSearch"></gIcon>
            <el-select
            v-model="labelList"
            multiple
            collapse-tags
            placeholder="选择搜索标签"
            style="width: 140px"
            >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            </el-select>
        </div>
        <div class="search-content">
          <ul>
          <li v-for="item in searchList" @click="gotoGameDetail(item.gid)">
            <div class="img-container">
              <img :src="attchFirstPic(item.gid)">
            </div>
            <div class="game-info">
              <span>{{ item.name }}</span>
              <span>{{ "上传时间：" + formatDate(item.date) }}</span>
            </div>
          </li>
        </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from 'vue';
import gIcon from '../components/gIcon.vue'
import { icons } from '../assets/icons/icon'
import { searchInfo } from '../stores/search'
import { HttpRequest } from '@/request/request'
import { Search } from '@element-plus/icons-vue'

export default defineComponent({
    components:{
        gIcon,
        Search
    },
    setup(){
      onBeforeMount(()=>{
        getSearchList();
      })
      const proxy = getCurrentInstance()?.proxy;
        const iconList = {
            loginin : icons.loginin,
            search:icons.search
        }
        const searchList = ref([]);
        const searchWord = ref("");
        const labelList = ref([]);
        const options = [
        {
          value: '视觉小说',
          label: '视觉小说',
        },
        {
          value: '恋爱模拟',
          label: '恋爱模拟',
        },
        {
          value: '角色扮演',
          label: '角色扮演',
        },
        {
          value: '青春',
          label: '青春',
        },
        {
          value: '校园',
          label: '校园',
        },
        {
          value: '战斗',
          label: '战斗',
        },
        {
          value: '科幻',
          label: '科幻',
        },
        {
          value: '玄幻',
          label: '玄幻',
        },
        {
          value: '热血',
          label: '热血',
        },
        {
          value: '冒险',
          label: '冒险',
        },
        {
          value: '悬疑',
          label: '悬疑',
        },
        {
          value: '恐怖',
          label: '恐怖',
        },
        {
          value: '少女',
          label: '少女',
        },
        {
          value: '穿越',
          label: '穿越',
        },
        {
          value: '养成',
          label: '养成',
        },
      ]

      async function getSearchList(){
        searchWord.value = searchInfo().searchWord;
        labelList.value = searchInfo().labelList;
        const len = labelList.value.length;
        var lable = "";
        for(let i=0;i<len;i++){
          lable += labelList.value[i];
          if(i!=len-1){
            lable += "*";
          }
        }
        const result = await HttpRequest.searchGame(searchWord.value,lable) as responseBody
        if(!result.success){
          (proxy as any).$message({
          message:result.msg,
          type:result.type
        })
       }
       else{
        searchList.value = result.data;
       }
      }

      async function gotoSearch(){
        if(searchWord.value != "") 
          searchInfo().setsearchWord(searchWord.value);
        else
          searchInfo().setsearchWord("");
        searchInfo().setsearchWord(labelList.value);
        const len = labelList.value.length;
        var lable = "";
        for(let i=0;i<len;i++){
          lable += labelList.value[i];
          if(i!=len-1){
            lable += "%";
          }
        }
        const result = await HttpRequest.searchGame(searchWord.value,lable) as responseBody
        if(!result.success){
          (proxy as any).$message({
          message:result.msg,
          type:result.type
        })
       }
       else{
        searchList.value = result.data;
       }
      }

      

      function gotoGameDetail(gid:number){
      if(gid != null)
      proxy?.$router.push(`/gamedetail/${gid}`);
    }

    function formatDate(cellValue:string){
      const date = new Date(cellValue);
      return  date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
    }
        return {
            iconList,
            searchList,
            options,
            searchWord,
            labelList,
            gotoGameDetail,
            attchFirstPic:HttpRequest.attchFirstPic,
            formatDate,
            gotoSearch
        }
    }
})
</script>

<style scoped>
.search{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(194, 193, 193, 0.5);
}
.search-top{
    display: flex;
    margin-top: 30px;
    box-shadow: 0 0 5px 1px rgba(94, 93, 93, 0.5);
    border-radius: 5px;
    padding: 10px;
    background-color: white;
    .icon{
        margin: 0 20px;
        
    }
    .icon:hover{
        opacity: 0.6;
        cursor: pointer;
    }
}

.search-content{
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  ul{
    width: 100%;
    display: flex;
    li:hover{
      opacity: 0.8;
      cursor: pointer;
    }
    li{
      width: 18%;
      margin: 1%;
      height: 0;
      padding-bottom: 18%;
      border-radius: 5%;
      box-shadow: 0 0 5px 2px rgba(94, 93, 93, 0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white;
      .img-container{
        width: 40%;
        height: 0;
        position: relative;
        padding: 30%;
        img{
          width: 100%;
          height: 100%;
          border-radius: 5px;
          left: 0;
          top: 0;
          position: absolute;
        }
      }

      .game-info{
        width: 90%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        span{
          font-weight: 550;
          font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
          color: #475669;
          margin: 5px 0;
        }
      }
    }
  }
}
</style>